<template>
  <div>
    <div class="flex justify-between align-center margin-bottom-20">
      <div class="font-weight-700 font-size-18">
        本财年账单
        <span class="margin-left-10" :class="currentArrearsAmount > 0 ? 'color-red' : ''">当前逾期账款：{{ currentArrearsAmount || 0 | fmoneyThousand }}元</span>
      </div>
      <el-button v-if="model.contractCode" type="primary" size="mini" class="self-mini-btn" @click="goHistoryBill">全部账单</el-button>
    </div>

    <!-- <div class="padding-bottom-20 flex justify-between align-center">
      <span class="font-size-16">当期账单</span>
    </div> -->
    <el-table :data="billList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :border="false" stripe>
      <el-table-column label="账单周期" align="center" width="210">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleStartTime | formatDate }}</span>
          <span class="padding-left-right-5">至</span>
          <span>{{ scope.row.cycleEndTime | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出账金额" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" placement="bottom" :disabled="!scope.row.child || scope.row.child.length == 1">
            <span class="cursor-pointer">{{ scope.row.amountReceivable || 0 | fmoneyThousand }}</span>
            <div slot="content" class="padding-5">
              <div class="margin-top-5 margin-bottom-5" v-for="item in scope.row.child" v-if="item.bizTypeName != '合计'">
                <span>{{item.bizTypeName}}：{{item.amountReceivable || 0 | fmoneyThousand}}元</span>
              </div>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="已缴纳金额" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.amountReceived || 0 | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账单状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.paymentStatus == 0">未出账</span>
          <span v-else-if="scope.row.paymentStatus == 1">
            <span v-if="scope.row.differDay > 0 && scope.row.differDay <= 30">
              缴费到期<br />
              {{ Math.abs(scope.row.differDay) }}天
            </span>
            <template v-else>未结清</template>
          </span>
          <span v-else-if="scope.row.paymentStatus == 2">
            <span v-if="scope.row.differDay > 0 && scope.row.differDay <= 30">
              缴费到期<br />
              {{ Math.abs(scope.row.differDay) }}天
            </span>
            <template v-else>未缴费</template>
          </span>
          <span v-else-if="scope.row.paymentStatus == 3" class="color-red">
            逾期<br />
            {{ Math.abs(scope.row.differDay) }}天
          </span>
          <span v-else-if="scope.row.paymentStatus == 4">已缴纳</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-align-right margin-top-20 margin-bottom-20">
      <el-pagination v-if="total" @current-change="pageChange" :page-size="pageSize" :total="total" layout="prev, pager, next"></el-pagination>
    </div>
  </div>
</template>
<script>
  import { requestTips, askDialog, accSubtr } from '@js/utils';
  import { formValid } from '@/lib/utils';
  import { fmoneyThousand } from '@js/utils';
  import { apiContractBillList, apiBillInfo } from '@a/about';

  export default {
    props: {
      model: {
        type: Object,
        default: null,
      },
    },

    data() {
      return {
        typeList: {
          isVacancy: '空置',
          isExpiring: '即将到期',
          isArrearage: '欠费',
          isUnderContract: '履约中',
          // isFinish: '装修期',
          isSigned: '已签约',
        },
        statusList: ['未付款', '未结清', '已出账', '已废止', '已收款', '逾期未付款'],
        statusColor: {
          isVacancy: '#D6D6D4',
          isExpiring: '#F8D595',
          // isFinish: '#9EA4B7',
          isArrearage: '#E27A78',
          isUnderContract: '#8AC8B3',
          isSigned: '#C2B0A2',
        },
        statusNmae: {
          0: '待出账',
          2: '已出账',
          4: '已付款',
        },
        billList: [],
        total: 0,
        pageSize: 5,
        currentPage: 1,
        currentArrearsAmount: 0,
      };
    },

    mounted() {
      if (this.model.contractCode) {
        this.getDataSource();
      }
    },

    methods: {
      async getDataSource(type) {
        let currentArrearsAmount = 0

        if (!type) {
          this.currentPage = 1
        }

        let res = await apiContractBillList({ 
          // currentPage: this.currentPage,
          // pageSize: this.pageSize,
          chargeItemCode: this.model.code, 
          cycleTimeAboutYear: this.$route.query.year || new Date().getFullYear(),
          status: 1
        });

        let rows = res.rows || [];

        rows.forEach(project => {
          if (project.child && project.child.length) {
            project.child.forEach(item => {
              item.differDay = project.differDay;
              item.billDescription = project.billDescription;
              item.cycleStartTime = project.cycleStartTime;
              item.cycleEndTime = project.cycleEndTime;
              item.paymentDeadline = project.paymentDeadline;
            });
          }

          if (project.paymentStatus == 3) {
            currentArrearsAmount += (project.amountReceivable - project.amountReceived)
          }
        });

        this.currentArrearsAmount = currentArrearsAmount
        this.total = res.total
        this.billList = rows;
      },
      //分页
      pageChange(currentPage) {
        this.currentPage = currentPage;
        // this.getDataSource('more');
      },

      goHistoryBill() {
        let param = {
          contractType: this.model.contractType,
          contractCode: this.model.contractCode,
          contractKey: this.model.contractKey,
          contractCategory: this.model.contractCategory,
          assetName: this.model.name,
          assetCode: this.model.code,
          headerName: this.model.name,
        };

        let pathName = '/businessAssets/ContractManage/allbill?';
        for (let i in param) {
          pathName += i + '=' + param[i] + '&';
        }
        window.open(pathName);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .cursor-pointer {
    cursor: pointer;
  }

  .flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  ::v-deep .el-table th.el-table__cell.is-leaf {
    background: #f1f1f1;
  }
  ::v-deep .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: none;
  }
  ::v-deep .el-table thead .cell {
    font-size: 14px;
  }
  .contract-code:hover {
    color: #3384fe;
  }
</style>
